<template>
  <div id="main">
    <button @click="changeData">按钮1</button>
    <button @click="changeTreeDataToReactive">按钮2</button>
    <ul>
      <li v-for="item in a">{{ item }}</li>
    </ul>
    <div id="selDom">

      <span>123</span>
      <el-select v-model="sheetType" @change="selectChange" placeholder="请选择" :placement="'bottom'">
        <el-option v-for="item in sheetList" :key="item.name" :label="item.displayName" :value="item.name">
        </el-option>
      </el-select>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";

import treeData from "./assets/data.json";
console.log('treeData: ', treeData);
const a = reactive([{ "a": 1111111111 }]);

const sheetType = ref("");
const selectChange = () => {

}
const sheetList = reactive([{
  name: 1,
  displayName: "哈哈哈"
}, {
  name: 2,
  displayName: "嘿嘿嘿"
}, {
  name: 3,
  displayName: "啦啦啦"
}])

const changeData = () => {
  console.log("点击了变换")
  a[0].a = new Date().toLocaleTimeString()
}
const changeTreeDataToReactive = () => {
  treeData.forEach(item => {
    a.push(item);
  })
}
</script>
<style lang="scss" scoped>
#selDom{
  width: 1000px;
  height: 40px;
  border: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
  span{
    font-size: 20px;
    color: aqua;
  }
}
</style>
